import { Empty } from 'antd';
import moment, { Moment } from 'moment';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { BudgetItem } from '../../../interface/budgetData';
import { SelectBudgetListDataSelector } from '../../../redux/BudgetList/budget-list-selector';
import { ActionProps } from '../../../redux/type';
import RecordItem from './RecordItem';

export default function RecordList()
{

    const budgetListData: BudgetItem[] = useSelector(SelectBudgetListDataSelector);

    const dispatch = useDispatch();

    useEffect(() =>
    {
        //Async Fetch Current Month BudgetList
        dispatch<ActionProps<string, Moment[]>>({
            type: "GetBudgetListData",
            payload: [
                moment().startOf('month'),
                moment().endOf('month'),
            ],
        });

    }, [dispatch]);

    return (
        <div className='RecordList'>
            {
                budgetListData.length === 0 && <Empty />
            }
            {budgetListData.map((item: BudgetItem, index: number) =>
            {
                let isShowDate: boolean = false;

                const day = moment(item.budget_date).format('DD');

                let nextDay: string = '';
                if (budgetListData[index - 1])
                {
                    nextDay = moment(budgetListData[index - 1].budget_date).format('DD');
                }

                isShowDate = day !== nextDay;

                return (
                    <RecordItem isShowDate={isShowDate} item={item} key={item.id} />
                );
            })}
        </div>
    );
}
